<template>
	<view class="videoSurveillance">
		<view class="mail_List">
			<view class="mail" style="font-weight: 700;">
				<view class="order">视频监控</view>
			</view>
		</view>
		<view class="icon">
			<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
		</view>
		<view style="margin: 20rpx;">
			2021-06-16 15:18:36 星期三
		</view>
		<view class="eastGate">
			<u-popup v-model="show" mode="bottom" height="900rpx">
				<text class="eastGate_top">{{particulars.name}}</text>
				<div id="play_window"></div>
<!-- 				<view class="eastGate_bottom">
					<view>
						<image class="triangle_one" src="../../../../static/workOrder/Polygon2.png" mode=""></image>
					</view>
					<view>
						<image class="triangle_two" src="../../../../static/workOrder/Polygon4.png" mode=""></image>
					</view>
					<view>
						<image class="triangle_three" src="../../../../static/workOrder/Polygon3.png" mode=""></image>
					</view>
					<view>
						<image class="triangle_four" src="../../../../static/workOrder/Polygon5.png" mode=""></image>
					</view>
					<view>
						<image class="circular" src="../../../../static/workOrder/Group1035.png" mode=""></image>
					</view>
				</view> -->
			</u-popup>
		</view>
	</view>
</template>

	<script src="../../../../common/h5player.min.js"></script>
<script>
	// import getters from './getters.js'
	// import * as h5player from '../../../../common/h5player.min.js'
	// import h5player from "../../../../common/h5player.min.js"
	var curIndex = 0; // 当前窗口下标
	// var myPlugin = new JSPlugin({
	//   szId: 'play_window', //需要英文字母开头 必填
	//   szBasePath: '../../../../common/h5player.min.js', // 必填,引用H5player.min.js的js相对路径
				
	//   // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
	//   iWidth: 600,
	//   iHeight: 400,
				
	//   // 分屏播放，默认最大分屏4*4
	//   // iMaxSplit: 4,
	//   // iCurrentSplit: 1,
				
	//   // 样式
	//   // oStyle: {
	//   //   border: "#343434",
	//   //   borderSelect: "#FFCC00",
	//   //   background: "#000"
	//   // }
	// });
	// let url = document.getElementById('url').value;
	// let startTime, endTime;
	// myPlugin.JS_Play(
	//   url,
	//   {
	//     playURL: url, // 流媒体播放时必传
	//     mode: 0, // 解码类型：0=普通模式; 1=高级模式 默认为0
	
	//     // 设置直连时的认证参数等
	//     // ...
	//   },
	//   curIndex, //当前窗口下标
	
	//   // 回放参数
	//   startTime,
	//   endTime,
	// )
	export default {
		data() {
			return {
				show: true,
				// 待接单Id
				cameraId:'',
				// 车辆详情
				particulars:'',
				// 审核通过
				staff:''
			}
		},
		onLoad(val) {
			this.loginId  = uni.getStorageSync("setModel")
			console.log(val)
			if(val.cameraId){
			this.cameraId=val.cameraId
				// 查询设备详情
				this.getListVehicleByIds()
			}
			// this.loading()
		},
		methods:{

			// 查询设备详情
			getListVehicleByIds() {
				this.$http.get('Camera/getCameraById',{id:this.cameraId,loginId:this.loginId.userId}).then(res => {
					this.particulars=res.data
					console.log(res, '查询设备详情')
					// this.owners = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.videoSurveillance {
		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				height: 160rpx;
				line-height: 230rpx;
				color: #fff;
				font-size: 40rpx;
				background-color: #2a4f65;
			}

			.order {
				text-align: center;
			}
		}

		.icon {
			position: absolute;
			top: 96rpx;
			left: 20rpx;
		}

		.eastGate {
			position: relative;

			.eastGate_top {
				position: absolute;
				top: 100rpx;
				left: 50rpx;
			}

			.eastGate_bottom {
				position: absolute;
				bottom: 160rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 500rpx;
				height: 500rpx;
				border: 1px solid #000;
				border-radius: 50%;

				image {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
				}

				.triangle_one {
					top: 20rpx;
					left: 50%;
					transform: translateX(-50%);
				}

				.triangle_two {
					top: 50%;
					left: 20rpx;
					transform: translateY(-50%);
				}

				.triangle_three {
					bottom: 20rpx;
					left: 50%;
					transform: translateX(-50%);
				}

				.triangle_four {
					top: 50%;
					right: 20rpx;
					transform: translateY(-50%);
				}
				
				.circular {
					width: 200rpx;
					height: 200rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
			}
		}

	}
</style>
